<template>
  <!--
    用法：
    <NumberInput
      :num-show="iptShow"
      @close="iptShow = false"
      @confirm="(res) => num = res"
    />
  -->
  <div>
    <Transition name="inputbox">
      <div
        class="number-input-box"
        v-show="numShow"
        :style="{ width: iptWidth, height: iptHeight}"
      >
        <div class="number-show-area" :style="{ lineHeight: numHeight, fontSize: numSize }">
          <div>{{ output_print }}</div>
          <span v-show="boxSize === 'large'">{{ output }}</span>
        </div>
        <table class="number-input-area" :style="{ height: iptAreaHeight }">
          <tr>
            <td class="ipt-cell" rowspan="2" @click="showHelp = !showHelp">
              <svg class="icon" aria-hidden="true" v-if="showHelp">
                <use xlink:href="#icon-bangzhu"></use>
              </svg>
              <span v-else class="ipt-cell-help">帮助</span>
            </td>
            <td class="ipt-cell" @click="output += '7'">
              <span>7</span>
            </td>
            <td class="ipt-cell" @click="output += '8'">
              <span>8</span>
            </td>
            <td class="ipt-cell" @click="output += '9'">
              <span>9</span>
            </td>
            <td class="ipt-cell" @click="emit('close')">
              <svg class="icon" aria-hidden="true" v-if="!showHelp">
                <use xlink:href="#icon-quxiao"></use>
              </svg>
              <span v-else class="ipt-cell-help">收起</span>
            </td>
          </tr>
          <tr>
            <td class="ipt-cell" @click="output += '4'">
              <span>4</span>
            </td>
            <td class="ipt-cell" @click="output += '5'">
              <span>5</span>
            </td>
            <td class="ipt-cell" @click="output += '6'">
              <span>6</span>
            </td>
            <td class="ipt-cell" @click="deleteNum">
              <svg class="icon" aria-hidden="true" v-if="!showHelp">
                <use xlink:href="#icon-zuozuo"></use>
              </svg>
              <span v-else class="ipt-cell-help">删除</span>
            </td>
          </tr>
          <tr>
            <td class="ipt-cell" rowspan="2" @click="changeSize">
              <svg class="icon" aria-hidden="true" v-if="!showHelp">
                <use xlink:href="#icon-gongnengkaiguan"></use>
              </svg>
              <span v-else class="ipt-cell-help">切换尺寸</span>
            </td>
            <td class="ipt-cell" @click="output += '1'">
              <span>1</span>
            </td>
            <td class="ipt-cell" @click="output += '2'">
              <span>2</span>
            </td>
            <td class="ipt-cell" @click="output += '3'">
              <span>3</span>
            </td>
            <td class="ipt-cell" @click="output = ''">
              <span v-if="!showHelp">CE</span>
              <span v-else class="ipt-cell-help">清空</span>
            </td>
          </tr>
          <tr>  
            <td class="ipt-cell" @click="output += '0'">
              <span>0</span>
            </td>
            <td class="ipt-cell" @click="addPoint">
              <span>.</span>
            </td>
            <td class="ipt-cell" colspan="2" @click="confirmInput">
              <svg class="icon" aria-hidden="true" v-if="!showHelp">
                <use xlink:href="#icon-queren"></use>
              </svg>
              <span v-else class="ipt-cell-help">确认</span>
            </td>
          </tr>
        </table>
      </div>
    </Transition>
  </div>
</template>

<script setup>
  import { ref, computed } from 'vue';

  const prop = defineProps(['numShow']);
  const emit = defineEmits(['close', 'confirm']);

  let showHelp = ref(false);
  let boxSize = ref('large');
  let iptWidth = ref('100%');
  let iptHeight = ref('360px');
  let numHeight = ref('60px');
  let numSize = ref('27px');
  let iptAreaHeight = computed(() => {
    return `${ parseInt(iptHeight.value) - parseInt(numHeight.value) }px`;
  });
  function changeSize() {
    if(boxSize.value === 'large') {
      boxSize.value = 'small';
      iptWidth.value = '60%';
      iptHeight.value = '250px';
      numHeight.value = '40px';
      numSize.value = '18px';
    } else {
      boxSize.value = 'large'; 
      iptWidth.value = '100%';
      iptHeight.value = '360px';
      numHeight.value = '60px';
      numSize.value = '27px';
    }
  }

  let output = ref('');
  let output_print = computed(() => {
    if(output.value === '' || output.value === '.') return 0;
    try {
      return parseFloat(output.value);
    } catch {
      return 0;
    }
  });
  function addPoint() {
    if(!output.value.includes('.'))
      output.value += '.';
  }
  function deleteNum() {
    output.value = output.value.substring(0, output.value.length - 1);
    if(output.value === '.') output.value = '';
  }
  function confirmInput() {
    emit('confirm', output_print.value);
    emit('close');
  }
</script>

<style lang="scss" scoped>
  table {
    border-collapse: collapse;
  }
  .number-input-box{
    position: fixed;
    bottom: 0;
    right: 0;
    box-shadow: 0 -3px 3px $theme-shadow00;
    background-color: white;
    transition: all .6s ease;
    z-index: 15;
  }
  .number-show-area{
    position: relative;
    width: 100%;
    transition: all .6s ease;
    div{
      text-align: end;
      width: 90%;
      margin: auto;
      overflow: auto;
    }
    span{
      position: absolute;
      left: 5px;
      bottom: 0;
      line-height: 14px;
      font-size: 12px;
      color: $theme-shadow;
      user-select: none;
    }
  }
  .number-input-area{
    width: 100%;
    transition: all .6s ease;
  }
  .ipt-cell{
    position: relative;
    width: 20%;
    height: 25%;
    border: 0.5px solid $theme-shadow00;
    font-size: 18px;
    color: $theme-main-dark;
    cursor: pointer;
  }
  .ipt-cell:hover{
    background-color: $theme-shadow00;
  }
  // ipt-cell下的所有子元素
  .ipt-cell > *{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  .ipt-cell-help{
    font-size: 14px;
  }
  .inputbox-enter-active{
    animation: boxshow .6s;
  }
  .inputbox-leave-active{
    animation: boxshow .6s reverse;
  }
  @keyframes boxshow{
    from { bottom: -100%; }
    to { bottom: 0; }
  }
</style>